<template>
    <div class="home_resource_box outer_shadows">
        <HomeResourceHeader @columnOptions="columnOptions"></HomeResourceHeader>
        <div class="home_resource_content"
             v-for="(item,index) in resourceContent.records" :key="index"
             :style="{'--delay': index*0.1+'s'}"
             @click="toDetail(item.id)">
            <HomeResourceImg :img-data="item"></HomeResourceImg>
            <HomeResourceContent :resource-content="item" :index="index"></HomeResourceContent>
        </div>
    </div>
</template>

<!--首頁下方资源列表-->
<script setup>
import HomeResourceHeader from "@/components/home/HomeResourceHeader.vue";
import HomeResourceImg from "@/components/home/HomeResourceImg.vue";
import HomeResourceContent from "@/components/home/HomeResourceContent.vue";
import {onMounted, ref} from "vue";
import api from "@/request/index.js";
import router from "@/router/index.js";

//当前页码，类型，查询条数
const pages = ref({
    size: 10,//10条
    kind: "软件",//类型,默认软件
    current: 1, //第一页
    page: 0,//总页数
    last: "",//是否最后一页
});

//资源列表
const resourceContent = ref({
    count: 0,//总行数
    page: 0,//总页数
    records: [{
        id: 0,
        uid: 1003,//文章所属用户id
        body: "文章内容", //文章内容
        title: "文章标题", //文章标题
        support: 12, //点赞数
        visit: 1275, //浏览数
        cover: "/img/home/t01b8d976a9f12bd368.jpg", //封面
        time: new Date,//文章时间
        kind: "软件",//文章类型
        support_statue: false //是否点赞
    }]
})

//预加载时间
onMounted(() => {
    resourceContent.value.records = [];
    getData();
    window.addEventListener('scroll', throttleHandleScroll);
})


//是否开启滚动加载
const scrollLoad = ref(true);

//监听页面的滚动高度,快达到底部时加载文章数据
const throttleHandleScroll = () => {
    //只容许加载2页
    if (pages.value.current >= 2) {
        return;
    }
    //执行的高度,距离底部高度
    const distanceToBottom = document.documentElement.scrollHeight - window.innerHeight - window.scrollY;
    if (distanceToBottom <= 400 && scrollLoad.value) {
        scrollLoad.value = false;
        console.log("滚动加载文章数据~~~~");
        pages.value.current += 1;
        getData();
    } else if (distanceToBottom > 250) {
        scrollLoad.value = true;
    }
};

//当前选项内容
const columnOptions = (msg) => {
    pages.value.current = 1;
    pages.value.kind = msg;
    resourceContent.value.records = [];
    getData();
};

//获取资源列表
const getData = () => {

    api.getArticlePage(pages.value.current, pages.value.size, pages.value.kind).then((res) => {
        resourceContent.value.records = resourceContent.value.records.concat(res.data.data.records);
        pages.value.page = res.data.data.page;
    })

}

//跳转详情页面
const toDetail = (id) => {
    window.open("#/articleDetails?id=" + id, '_blank');
    window.localStorage.setItem("Current_option", "1000");
}

</script>

<style scoped>
.home_resource_box {
    width: 100%;
    min-height: 500px;
    padding: 0 15px 5px;
}

.home_resource_content {
    width: 100%;
    display: flex;
    margin: 30px 0;
    animation: home_resource_content .2s ease-in-out 0s 1 forwards;
    animation-delay: var(--delay);
    opacity: 0;
}

@keyframes home_resource_content {
    0% {
        opacity: 0;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

</style>